<template>
  <view>
    <view class="header">
      <view class="searchBox">
        <image
          src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E9%9D%9E%E7%BF%94%E6%B4%BB%E5%8A%A8/u1817.png"
        ></image>
        <input placeholder="搜索课程/头条/活动" />
      </view>
      <view class="searchBtn">
        <text>取消</text>
      </view>
    </view>
    <view class="search1">
      <view class="hot">热门搜索</view>
      <view class="smallHotBox">
        <!-- <navigator url="../Search-ok
				/Search-ok
				.vue"> -->
        <view v-for="course in hotArray" key="hotArray.url"
          ><text class="smallHot">{{ course.name }}</text></view
        >
        <!-- </navigator> -->
      </view>
    </view>
    <view class="search1">
      <view class="hot">
        历史记录
        <view
          ><image
            src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E6%90%9C%E7%B4%A2%E9%A1%B5%E9%9D%A2/u2629.png"
          ></image
        ></view>
      </view>
      <view class="smallHotBox">
        <!-- <navigator url="../Search-ok
				/Search-ok
				.vue"> -->
        <view v-for="history in histories" key="hotArray.id"
          ><text class="smallHot">{{ history.name }}</text></view
        >
        <!-- </navigator> -->
      </view>
    </view>
  </view>
</template>

<script lang="ts">
export default {
  data() {
    return {
      hotArray: [
        {
          url: 1,
          name: '英语入门课程',
        },
        {
          url: 2,
          name: '英语课程',
        },
        {
          url: 3,
          name: '中学物理',
        },
        {
          url: 4,
          name: '幼儿英语入门课程',
        },
        {
          url: 5,
          name: '小学奥数辅导',
        },
      ],
      histories: [
        {
          id: 1,
          name: '英语',
        },
        {
          id: 2,
          name: '物理',
        },
        {
          id: 3,
          name: '语文',
        },
        {
          id: 4,
          name: '历史',
        },
        {
          id: 5,
          name: '化学',
        },
        {
          id: 6,
          name: '美术',
        },
        {
          id: 7,
          name: '体育',
        },
      ],
    }
  },
  methods: {},
}
</script>

<style lang="less">
.header {
  display: flex;
  justify-content: center;
  height: 80rpx;
  margin: 42rpx 0;
  line-height: 80rpx;
  .searchBox {
    display: flex;
    align-items: center;
    width: 572rpx;
    height: 80rpx;
    background-color: #f2f2f2;
    border-radius: 40px;
    image {
      width: 36rpx;
      height: 36rpx;
      margin-left: 34rpx;
      margin-right: 36rpx;
    }
    input {
      color: #9a9a9a;
    }
  }
  .searchBtn {
    color: #252525;
    font-size: 26rpx;
    margin-left: 38rpx;
  }
}
.search1 {
  border-bottom: 1px solid #faf9f9;
  padding: 0 42rpx;
  .hot {
    font-size: 26rpx;
    color: #252525;
    margin-bottom: 40rpx;
    margin-top: 22rpx;
    display: flex;
    justify-content: space-between;
    image {
      width: 28rpx;
      height: 32rpx;
      margin-right: 20rpx;
    }
  }
  .smallHotBox {
    display: flex;
    // justify-content: space-between;
    flex-wrap: wrap;
    view {
      margin-bottom: 34rpx;
      padding-right: 40rpx;
      .smallHot {
        height: 48rpx;
        background-color: #f6f8ff;
        font-size: 22rpx;
        color: #0e66fe;
        line-height: 48rpx;
        padding: 12rpx 38rpx;
        border-radius: 50px;
      }
    }
  }
}
</style>